{% extends "base.html" %}
{% from "macros/widgets.html" import accordion_item %}

{% block content %}
<div class="jumbotron">
  <div class="container">
    <h1>{{ module.name or module.id }}</h1>
    <br>
    <h2 class="module-dojo"><a href="{{ url_for('pwncollege_dojos.view_dojo', dojo=dojo.reference_id) }}">{{ dojo.name or dojo.id }}</a></h2>

    {% if assessments %}
    <br>
    {% for assessment in assessments %}
    <h3 class="module-due-date" title="{{ assessment.date }}">{{ assessment.name }} in {{ assessment.until }}</h3>
    {% endfor %}
    {% endif %}
  </div>
</div>
<div class="container">

  {% if module.description %}
  <p class="row">{{ module.description | markdown }}</p>
  <br>
  {% endif %}

  {% if module.resources %}
  <h2 class="row">课程讲解与资料学习</h2>

  <div class="accordion" id="resources">
    {% for resource in module.resources %}
      {% call(header) accordion_item("resources", loop.index) %}
        {% if header %}
          <h4 class="accordion-item-name">{{ resource.name }}</h4>
        {% else %}
          {% if resource.type == "lecture" %}
          {% if resource.video %}
	  {% set src = "//player.bilibili.com/player.html" + "?" + "aid=" + resource.video + "&" + ("bvid=" + resource.playlist + "&" if resource.playlist else "") +"page=1&autoplay=0&high_quality=1&danmaku=0" %}
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" data-src="{{ src }}" title="Bilibili video player" allowfullscreen></iframe>
          </div>
          {% endif %}
          {% if resource.slides %}
          {% set src = "//mudongliang.github.io/files/dojos/" + dojo.id + "/" + resource.slides %}
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" data-src="{{ src }}.pdf" title="GitHub PDF Slide" allowfullscreen></iframe>
          </div>
          {% endif %}

          {% elif resource.type == "markdown" %}
          <div class="embed-responsive">
            {{ resource.content | markdown }}
          </div>
          {% endif %}
        {% endif %}
      {% endcall %}
    {% endfor %}
  </div>

  <br>
  {% endif %}

  {% if challenges %}
  <h2 class="row">挑战关卡</h2>

  <div class="accordion" id="challenges">
    {% for challenge in challenges %}
      {% set solved = "challenge-solved" if challenge.challenge_id in user_solves else "challenge-unsolved" %}
      {% set active = "challenge-active" if challenge.challenge_id == current_dojo_challenge.challenge_id else "" %}
      {% call(header) accordion_item("challenges", loop.index) %}
        {% if header %}
          <h4 class="accordion-item-name {{ active }}">
            <span class="d-sm-block d-md-block d-lg-block">
              <i class="fas fa-flag pr-3 {{ solved }}"></i>{{ challenge.name or challenge.id }}
              {% if not challenge.visible() %}
              <small><small><small>
                    <i>hidden</i> &mdash; you can see this because you are this dojo's administrator
              </small></small></small>
              {% endif %}
            </span>
          </h4>
          <div class="rating-container" style="float: right;">
          {% if challenge.data.level %}
          <span id="rating-{{ challenge.challenge_id }}" class="rating" data-level="{{ challenge.data.level }}" style="padding-right: 5px; margin-right: 5px; color: #b5e853; font-size: 25px;">
            {% set levelStr = challenge.data.level %}
            {% set level = levelStr|int %}
          </span>

          {% endif %}
          <span class="total-solves">{{ total_solves.get(challenge.challenge_id, 0) }} solves</span>
        </div>
        {% else %}
          <div class="embed-responsive">
            <p>{{ challenge.description | markdown }}</p>
          </div>
          <div class="row">
            <div class="col-sm-6 form-group text-center">
              <button id="challenge-start" type="submit" class="btn btn-md btn-outline-secondary w-100">
                <span class="d-sm-block d-md-block d-lg-block">
                  <i class="fas fa-play fa-2x pr-3"></i>Start
                </span>
              </button>
            </div>
            <div class="col-sm-6 form-group text-center">
              <button id="challenge-practice" type="submit" class="btn btn-md btn-outline-secondary w-100">
                <span class="d-sm-block d-md-block d-lg-block">
                  <i class="fas fa-flask fa-2x pr-3"></i>Practice
                </span>
              </button>
            </div>
          </div>
          <div class="row submit-row">
            <div class="col-md-9 form-group">
              <input id="module" type="hidden" value="{{ challenge.module.id }}">
              <input id="challenge" type="hidden" value="{{ challenge.id }}">
              <input id="challenge-id" type="hidden" value="{{ challenge.challenge_id }}">
              <input id="challenge-input" class="challenge-input form-control" type="text" name="answer" placeholder="Flag">
            </div>
            <div class="col-md-3 form-group key-submit">
              <button id="challenge-submit" type="submit" class="challenge-submit btn btn-md btn-outline-secondary float-right w-100 h-100">
                Submit
              </button>
            </div>
          </div>
          <div class="row notification-row">
	          <div class="col-md-12">
	            <div id="result-notification" class="alert alert-dismissable text-center w-100" role="alert" style="display: none;">
		            <strong id="result-message"></strong>
	            </div>
	          </div>
	        </div>
        {% endif %}
      {% endcall %}
    {% endfor %}
    <script>
      const getStar = (rate) => '★★★★★★★★★★☆☆☆☆☆☆☆☆☆☆'.slice(10-rate, 20-rate);
      document.addEventListener('DOMContentLoaded', function() {
        const ratings = document.querySelectorAll('.rating');
        ratings.forEach(function(rating) {
          const level = parseInt(rating.dataset.level);
          rating.innerText = getStar(level);
        });
      });
    </script>

  <br>

  <h2 class="row">模块排名</h2>
  <p class="row">此计分板反映了本道馆模块启动后挑战成功的记录。</p>
  {% from "macros/scoreboard.html" import scoreboard %}
  {{ scoreboard() }}

  {% endif %}

</div>
{% endblock %}

{% block scripts %}

<script defer src="{{ url_for('views.themes', path='js/dojo/challenges.js') }}"></script>
<script defer onload="loadScoreboard(0, 1);" src="{{ url_for('views.themes', path='js/dojo/scoreboard.js') }}"></script>
{% endblock %}
